Setting an Image as List Item Marker
02-02-18 Course- CSS-Simple
Apart from the predefined bullet styles, you can also use an image to mark the items in an unordered list. You can specify the Web address of the image in the HTML document, using the list-style-image property.
Let’s do the following steps to set an image as bullet in an unordered list:
<!DOCTYPE html>
<html>
<head>
<title>Setting an Image as List Item Marker</title>
<style type=”text/css”>
ul {list-style-image: url(images/newsmiley.girf); text-indent:20px;}
</style>
</head>
<body>
<h2>Example of setting images in the list</h2>
<h4>List the Name of Colors:</h4>
<ul>
<li>Pink</li>
<li>Red</li>
<li>Brown</li>
<li>Yellow</li.
<li>Blue</li>
<li>Black</li>
<li>Purple</li>
</ul>
</body>
</html>
Save the document with the name ImageAsListItemMarker.html and open on browser.